import React, { useState, useContext } from 'react'
import { CloseOutlined } from '@ant-design/icons';
import louyu from '../assets/css/louyu.module.css'
import { Steps, message, Upload } from 'antd';
import cont from '../assets/js/cont'
import axios from 'axios';

const items = [
    {
        title: '基础信息',
    },
    {
        title: '楼宇图片',
    },
    {
        title: '楼层',
    }
];

export default function AddBuild(props) {
    let act = useContext(cont);
    let [num, setNum] = useState(0)
    let [n, setN] = useState(0)
    let [un, setUn] = useState(0)
    let [floor, setFloor] = useState([])
    let [unfloor, setUnfloor] = useState([])
    let [name, setName] = useState('')
    let [addr, setAddr] = useState('')
    let [detail, setDetail] = useState('')
    let [detail1, setDetail1] = useState('')
    const { getData } = props;

    function getImg(url) {
        return new URL(url, import.meta.url).href
    }

    const addBuild = () => {
        axios.post('/api//build/add', {
            name: name,
            addr: addr,
            floor: n,
            unfloor: un,
            build_info: detail,
            operator_info: detail1,
            img: '../assets/images/com.png'
        }).then(res => {
            console.log(res);
            getData()
            act.change()
            success()
        })
    }

    const success = () => {
        message.open({
            type: 'success',
            content: '楼宇新建成功！',
        });
    };

    const warning = () => {
        message.open({
            type: 'warning',
            content: '请输入内容....',
        });
    };
    return (
        <div className={louyu.cover}>
            <div className={louyu.addBuild}>
                <div className={louyu.head}>
                    <span>楼宇新建</span>
                    <CloseOutlined style={{ color: "#B4B6BB" }} onClick={() => {
                        act.change()
                    }} />
                </div>
                <div className={louyu.setps}>
                    <Steps current={num} percent={80} size="small" labelPlacement="vertical" items={items} />
                </div>
                {num == 0 &&
                    <div>
                        <div className={louyu.input}>
                            <span className={louyu.fuhao}>*</span>
                            <span>楼宇名称</span>
                            <div className={louyu.input1}>
                                <input placeholder='请输入' value={name} onChange={(e) => {
                                    setName(e.target.value);
                                }} />
                            </div>
                        </div>
                        <div className={louyu.input}>
                            <span className={louyu.fuhao}>*</span>
                            <span>详细地址</span>
                            <div className={louyu.input1}>
                                <input placeholder='请输入详细地址'
                                    value={addr}
                                    onChange={(e) => {
                                        setAddr(e.target.value);
                                    }}
                                />
                            </div>
                        </div>
                        <div className={louyu.input}>
                            <span>楼宇简介</span>
                            <div className={louyu.input1}>
                                <textarea className={louyu.textarea} value={detail}
                                    onChange={(e) => {
                                        setDetail(e.target.value);
                                    }} />
                            </div>
                        </div>
                        <div className={louyu.input}>
                            <span>运营方简介</span>
                            <div className={louyu.input1}>
                                <textarea className={louyu.textarea} value={detail1}
                                    onChange={(e) => {
                                        setDetail1(e.target.value);
                                    }} />
                            </div>
                        </div>
                        <div className={louyu.tonext}>
                            <button className={louyu.next} onClick={() => {
                                if (name == '' || addr == '') {
                                    warning()
                                } else {
                                    setNum(1)
                                }
                            }}>下一步</button>
                        </div>
                    </div>
                }
                {num == 1 &&
                    <div>
                        <div className={louyu.info}>
                            <img src={getImg('../assets/images/icon.png')} alt="" />
                            <span>最多可上传9张，支持jpg,png,jpeg格式,单张不超过2M</span>
                        </div>
                        <div className={louyu.photo}>
                            {/* <img src={getImg('../')} alt="" /> */}
                            <Upload
                                name="avatar"
                                listType="picture-card"
                                className={louyu.avatar}
                                showUploadList={true}
                                style={{ width: 120, height: 160 }}
                            // action="http://172.16.17.115:8080/upload/image"
                            >
                                <div className={louyu.addPhone}>
                                    <img src={getImg('../assets/images/add.png')} alt="" />
                                </div>

                            </Upload>

                        </div>
                        <div className={louyu.tonext}>
                            <button onClick={() => {
                                setNum(0)
                            }}>上一步</button>
                            <button className={louyu.next} onClick={() => {
                                setNum(2)
                            }}>下一步</button>
                        </div>
                    </div>
                }
                {num == 2 &&
                    <div>
                        <div className={louyu.tosetting}>楼层配置</div>
                        <div className={louyu.setfloor}>
                            <div className={louyu.setting}>
                                <span>地上</span>
                                <div className={louyu.floor}>
                                    <div style={{ 
                                        fontSize: 28,
                                         lineHeight: 1,
                                         cursor:'pointer',
                                         userSelect:'none'
                                         }} onClick={() => {
                                        if (n > 0) {
                                            setN(n - 1)
                                            floor.pop()
                                            setFloor([...floor])
                                        }
                                    }}>-</div>
                                    <div style={{ flex: 2 }}>{n}</div>
                                    <div className={louyu.last}
                                    style={{
                                         cursor:'pointer',
                                         userSelect:'none'
                                    }}
                                        onClick={() => {
                                            setN(n + 1)
                                            setFloor([...floor, n + 1])
                                        }}
                                    >+</div>
                                </div>
                                <span>层</span>
                            </div>
                            <div className={louyu.setting1}>
                                <span>地下</span>
                                <div className={louyu.floor}>
                                    <div style={{ 
                                        fontSize: 28, 
                                        lineHeight: 1,
                                         cursor:'pointer',
                                         userSelect:'none'
                                    }} onClick={() => {
                                        if (un > 0) {
                                            setUn(un - 1)
                                            unfloor.pop()
                                            setUnfloor([...unfloor])
                                        }
                                    }}>-</div>
                                    <div style={{ flex: 2 }}>{un}</div>
                                    <div className={louyu.last}
                                    style={{
                                         cursor:'pointer',
                                         userSelect:'none'
                                    }}
                                        onClick={() => {
                                            if (un < 3) {
                                                setUn(un + 1)
                                                setUnfloor([...unfloor, un + 1])
                                            }
                                        }}
                                    >+</div>
                                </div>
                                <span>层</span>
                            </div>
                        </div>
                        <div className={louyu.detailFloor}>
                            <div className={louyu.left} >
                                {floor.map((item, index) => {
                                    return (
                                        <div key={index} className={louyu.detail}>
                                            <span>地上</span>
                                            <div className={louyu.floorNum}>
                                                <div>{item}</div>
                                                <span>层</span>
                                            </div>
                                            <img src={getImg('../assets/images/close.png')} alt="" />
                                        </div>
                                    )
                                })}
                            </div>
                            <div className={louyu.right}>
                                {unfloor.map((item, index) => {
                                    return (
                                        <div key={item} className={louyu.detail}>
                                            <span>地下</span>
                                            <div className={louyu.floorNum}>
                                                <div>{item}</div>
                                                <span>层</span>
                                            </div>
                                            <img src={getImg('../assets/images/close.png')} alt="" />
                                        </div>
                                    )
                                })}
                            </div>
                        </div>
                        <div className={louyu.tonext}>
                            <button onClick={() => {
                                setNum(1)
                            }}>上一步</button>
                            <button className={louyu.next} onClick={() => { addBuild() }}>保存</button>
                        </div>
                    </div>
                }
            </div>
        </div>
    )
}
